<template>
  <div class="container">
    <el-row :gutter="10">
      <el-col :span="24">
        <div class="section top-section">
          <!-- 上部分内容 -->
          <el-button type="primary" @click="showTopDialog = true">新增</el-button>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="section bottom-section">
          <!-- 下部分内容 -->
          <el-table :data="newTableData" style="width: 100%">
            <el-table-column prop="name" label="名称" width="150"></el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!-- 上半部分弹出框 -->
    <el-dialog v-model="showTopDialog" title="新增">
      <el-form :model="topForm1" :rules="topForm1Rules" ref="topForm1Ref" label-width="100px">
        <el-form-item label="泥料名称" prop="field1">
          <el-input v-model="topForm1.field1"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showTopDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmTopForms">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="修改信息">
      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="100px">
        <el-form-item label="名称" prop="col1">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmEdit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// 你可以在这里添加逻辑
import {ref, reactive, onMounted} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {home} from '@/api/home.ts'

const loading = ref(false) // 添加 loading 状态

onMounted(() => {
  getClay_material()
  console.log('页面加载完成');
})

const getClay_material = () => {
  loading.value = true // 设置 loading 为 true
  home.getClay_material().then((res: any) => {
    console.log(res.data)
    newTableData.value = res.data; // 将 API 返回的数据赋值给 newTableData
  }).finally(() => {
    loading.value = false // 设置 loading 为 false
  })
}

const newTableData = ref([]);

const handleEdit = (index: number, row: any) => {
  console.log(index, row)
  editForm.value.name = row.name;
  editForm.value.uuid = row.uuid;
  dialogFormVisible.value = true;
};

const handleDelete = (index: number, row: any) => {
  ElMessageBox.confirm('确定要删除该记录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    loading.value = true; // 设置 loading 为 true
    console.log('删除', index, row);
    home.getDeleteClay_material(row.uuid).then((res: any) => {
      ElMessage.success('删除成功！');
      // 确保删除后刷新列表
      getClay_material();
    }).catch((err: any) => {
      console.error('删除失败:', err);
      ElMessage.error('删除失败，请重试！');
    }).finally(() => {
      loading.value = false; // 设置 loading 为 false
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
};

const dialogFormVisible = ref(false);
const editFormRef = ref();

const editForm = ref({
  name: '',
  uuid: ''
});

const additionalForm = ref({
  info1: '',
  info2: ''
});

const editRules = reactive({
  name: [
    {required: true, message: '请输入name', trigger: 'blur'}
  ],
});

const confirmEdit = () => {
  editFormRef.value.validate((valid1: boolean) => {
    if (valid1) {
      // 更新数据逻辑
      loading.value = true
      home.getModifyClay_material(editForm.value.name, editForm.value.uuid).then((res: any) => {
        console.log(res.data)
        ElMessage.success('修改成功!')
        getClay_material()
      }).finally(() => {
        loading.value = false // 设置 loading 为 false
      })
      dialogFormVisible.value = false;
    } else {
      console.log('表单验证失败');
    }
  });
};

// 上半部分弹出框相关代码
const showTopDialog = ref(false);
const topForm1Ref = ref();

const topForm1 = ref({
  field1: '',
  field2: ''
});

const topForm1Rules = reactive({
  field1: [
    {required: true, message: '请输入字段1', trigger: 'blur'}
  ],
  field2: [
    {required: true, message: '请输入字段2', trigger: 'blur'}
  ]
});

const confirmTopForms = () => {
  topForm1Ref.value.validate((valid1: boolean) => {
    if (valid1) {
      // 处理表单提交逻辑
      loading.value = true; // 设置 loading 为 true
      home.getAddClay_material(topForm1.value.field1, 2).then((res: any) => {
        console.log(res.data);
        getClay_material();
        ElMessage.success('新增成功');
      }).finally(() => {
        loading.value = false; // 设置 loading 为 false
        // 清空表单数据
        topForm1.value.field1 = '';
        topForm1.value.field2 = '';
        topForm1Ref.value.resetFields(); // 重置表单校验状态
      });
      showTopDialog.value = false;
    } else {
      console.log('表单验证失败');
    }
  });
};

</script>

<style scoped lang="less">
.container {
  padding: 10px; /* 外边距 */
}

.section {
  background-color: white; /* 背景颜色 */
  border-radius: 5px; /* 圆角 */
  padding: 20px; /* 内边距 */
  margin-bottom: 10px; /* 下边距 */
}

.top-section {
  /* 可以在这里添加特定的样式 */
}

.bottom-section {
  /* 可以在这里添加特定的样式 */
}
</style>